<template>
    <div class="goods">
        <div class="goods-content">
            <div class="menu-wrap" ref="menuWrap">
                <ul>
                    <li class="menu-item"
                    v-for="(item,index) in state.goods" :key="index"
                    :class="{'current':currentIndex === index}"
                    @click= "selectMenu(index)"
                    >
                        <span class="text">
                            <SupportIcon size="3":type="item.type" v-if="item.type>=0"/>
                            {{ item.name }}
                        </span>
                    </li>
                </ul>
            </div>
            <div class="foods-wrap" ref="foodsWrap">
                <ul>
                    <!-- 菜系 -->
                    <li ref="foodList" class="food-list"  v-for="(items,index) in state.goods":key="index">
                        <h1 class="title">{{ items.name }}</h1>
                        <ul>
                            <!-- 菜品 -->
                            <li class="food-item" v-for="(item,index) in items.foods":key="index">
                                <div class="pic">
                                    <img :src="item.icon" alt="">
                                </div>
                                <div class="content">
                                    <h2 class="name">
                                        {{ item.name }}
                                    </h2>
                                    <div class="desc">
                                        {{ item.description }}
                                    </div>
                                    <div class="extra">
                                        <span class="count">月售{{item.sellCount}}份</span>
                                        <span>好评率{{item.rating}}%</span>
                                    </div>
                                    <div class="price">
                                        <span class="now">￥{{ item.price }}</span>
                                        <span class="old" v-if="item.oldPrice">￥{{ item.oldPrice }}</span>
                                    </div>
                                    <div class="cartcontrol-wrap">
                                        <CartControl :food="item" @update:food="updateFood"/>
                                    </div>

                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <ShopCart :selectedFoods="state.selectedFoods" :seller="seller"/>
</template>

<script setup>
import SupportIcon from '@/components/support-ico/index.vue'
import { getGoods } from '@/api'
import { onBeforeUpdate, onUpdated, reactive,ref,nextTick } from 'vue';
import BScroll from '@better-scroll/core'
import {computed} from 'vue'
import CartControl from '@/components/cart-control/Index.vue'
import ShopCart from '@/components/shop-cart/Index.vue'

// onUpdated (()=>{
//     initScroll()
// })

defineProps({
    seller: {}
})

const state = reactive({
    goods:[],
    // currentIndex:0,
    foodsScroll:null,
    listHeight:[],
    scrollY:0,
    selectedFoods:[],

})

getGoods().then(res=>{
    console.log(res);
    state.goods = res
    nextTick(()=>{ //只会在组件编译挂载且渲染完成后才执行
        initScroll()
        _calculateHeight()
    })

})

const foodList = ref(null)
const selectMenu = (i) =>{
    state.currentIndex = i
    state.foodsScroll.scrollToElement( foodList.value[i] ,300) 
}

//滚动效果
const menuWrap = ref(null)
const foodsWrap = ref(null)
const initScroll=() =>{
    new BScroll(menuWrap.value, {
        click:true
    })
    state.foodsScroll = new BScroll(foodsWrap.value, {
        click:true,
        probeType:3
    })
    state.foodsScroll.on('scroll',pos => {
        // console.log(Math.abs(pos.y));
        state.scrollY = Math.abs(pos.y)
    })
}



//所有菜系的高度
const _calculateHeight = () =>{
    // foodList.value[0].clientHeight
    let height = 0
    state.listHeight.push(height)
    foodList.value.forEach(li =>{
        height += li.clientHeight
        state.listHeight.push(height)
    })
    console.log(state.listHeight);
}

const currentIndex = computed (()=>{
    for(let i = 0; i < state.listHeight.length; i++){
        let h1 = state.listHeight[i]
        let h2 = state.listHeight[i+1]
        if(!h2 || (state.scrollY >= h1 && state.scrollY < h2)){
            return i
        }
    }
    return 0
})

//子组件点了+号后：
const updateFood = () =>{
    // console.log(state.goods);
    // 将拥有count字段的对象都挑出来
    const arr = []
    for( let good of state.goods ){
        for(let food of good.foods){
            if(food.count){
                arr.push(food)
                // state.selectedFoods.push(food)

            }
        }
    }
    state.selectedFoods=arr
    
}

</script>

<style lang="less" scoped>
@import 'src/assets/variable.less';
    .goods{
    width: 100%;
    position: absolute;
    bottom: 46px;
    top: 177px;
    overflow: hidden;
    .goods-content{
        display: flex;
        height: 100%;
        
        .menu-wrap{
        flex: 0 0 80px;
        background-color: @color-background-ssss;
        // overflow-y: scroll;
        .menu-item{
            padding: 0 14px;
            font-size: @fontsize-small;
            height: 54px;
            display: flex;
            justify-content: center;
            align-items: center;
            &.current{
                background-color: #fff;
                font-weight: bold;
            }
        }
        }
        .foods-wrap {
            flex: 1;

            .title {
                height: 26px;
                line-height: 26px;
                font-size: @fontsize-small;
                color: rgb(147, 153, 159);
                background-color: @color-background-ssss;
                padding-left: 14px;
                border-left: 2px solid #d9dde1;
            }

            .food-item {
                display: flex;
                padding: 18px;

                .pic {
                flex: 0 0 57px;
                margin-right: 10px;

                img {
                    width: 100%;
                }
                }

                .content {
                flex: 1;
                position: relative;

                .name {
                    font-size: @fontsize-medium;
                    color: @color-background;
                    margin: 2px 0 8px 0;
                }

                .desc,
                .extra {
                    font-size: @fontsize-small-s;
                    color: rgb(147, 153, 159);
                    margin-bottom: 8px;

                    .count {
                    margin-right: 12px;
                    }
                }

                .price {
                    font-weight: 700;

                    .now {
                    font-size: @fontsize-medium;
                    color: @color-red;
                    margin-right: 8px;
                    }

                    .old {
                    font-size: @fontsize-small-s;
                    color: rgb(147, 153, 159);
                    text-decoration: line-through;
                    }
                }

                .cartcontrol-wrap {
                    position: absolute;
                    right: 0;
                    bottom: 12px;
                }
                }
            }
    }
    }
    }
</style>